import React,{Component} from 'react';
import {Platform, StyleSheet, Text,ScrollView, View, TouchableOpacity, Alert } from 'react-native';

export default class CourseDetails extends Component{
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
	render(){
		return(
			<ScrollView style={styles.box}>
				<View style={styles.container}>
					<Text style={styles.title}>太极拳</Text>
					<Text style={styles.briefIntroductionTitle}>课程简介</Text>
					<Text style={styles.briefIntroductionContainer}>课程详情课程详情课课程详情课程详情课程详情课程详情情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课课程详情课程详情课程详情课程详情情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课课程详情课程详情课程详情课程详情情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课课程详情课程详情课程详情课程详情情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课课程详情课程详情课程详情课程详情情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情</Text>
					<Text style={styles.teachersTitle}>教师简介</Text>
					<Text style={styles.teachersContainer}>课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情课程详情</Text>
					<Text style={styles.explain}>总课时:60小时</Text>
					<Text style={styles.explain}>上课时间:详情课程详情课</Text>
					<Text style={styles.explain}>上课地点:课程详情课程详课程详情课程课程详情课程课程详情课程</Text>
					<View style={{flex: 1,justifyContent:'center', flexDirection: 'row',paddingTop:15,}}>
					    <TouchableOpacity style={{height:40}}>
					      	<Text style={styles.btn}>课程评价</Text>
					    </TouchableOpacity>
					</View>
				</View>
				
				
			</ScrollView>
		);
	}
}

const styles = StyleSheet.create({
	ScrollView:{
		backgroundColor:"#F2F2F2",
	},
	topTitle:{
		backgroundColor: '#D04542',
		height:50,
		textAlign: 'center',
		fontSize: 18,
	  	fontWeight:'bold',
	  	lineHeight: 50 ,
	  	color: 'white',
	},
	container:{
		paddingLeft:15,
		paddingRight:15,
		paddingBottom:15,
	},
	title:{
		height:50,
		textAlign: 'center',
		fontSize: 18,
	  	fontWeight:'bold',
	  	lineHeight: 50 ,
	  	//borderBottomWidth: StyleSheet.hairlineWidth,
	  	borderBottomWidth:1,
		borderBottomColor: "#D4D4D4",
	},
	briefIntroductionTitle:{
		fontSize: 18,
		lineHeight: 50 ,
		color: '#333333',
	},
	teachersTitle:{
		fontSize: 18,
		lineHeight: 50 ,
		color: '#333333',
	},
	briefIntroductionContainer:{
		height:'auto',
  		minHeight: 50,
  		fontSize: 15,
  		borderBottomWidth:1,
		borderBottomColor: "#D4D4D4",
		paddingBottom:10,
		lineHeight: 23 ,
		color: '#3F3F3F',
	},
	teachersContainer:{
		height:'auto',
  		minHeight: 50,
  		fontSize: 15,
  		borderBottomWidth:1,
		borderBottomColor: "#D4D4D4",
		paddingBottom:10,
		lineHeight: 23 ,
		color: '#3F3F3F',
	},
	explain:{
		lineHeight:20,
		paddingTop:10,
		
	},
	btn:{
	  	width:150,
	  	backgroundColor:'#D04542',
	  	borderRadius:2,
	  	textAlign: 'center',
	  	lineHeight: 40 ,
	  	color: 'white',
	  	fontSize:18,
	},
});
